<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App"
};
(window.onload = function() {
  document.addEventListener("touchstart", function(event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  document.addEventListener("gesturestart", function(event) {
    event.preventDefault();
  });
}),
  //designWidth:设计稿的实际宽度值，需要根据实际设置
  //maxWidth:制作稿的最大宽度值，需要根据实际设置
  //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
  (function(designWidth, maxWidth) {
    var doc = document,
      win = window,
      docEl = doc.documentElement,
      remStyle = document.createElement("style"),
      tid;
    //浏览器竖屏与横屏转换的BUG。
    function refreshRem() {
      var width = docEl.getBoundingClientRect().width;
      maxWidth = maxWidth || 540;
      width > maxWidth && (width = maxWidth);
      var rem = (width * 100) / designWidth;
      remStyle.innerHTML = "html{font-size:" + rem + "px;}";
    }

    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(remStyle);
    } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(remStyle);
      doc.write(wrap.innerHTML);
      wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
    refreshRem();

    win.addEventListener(
      "resize",
      function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
      },
      false
    );

    win.addEventListener(
      "pageshow",
      function(e) {
        if (e.persisted) {
          // 浏览器后退的时候重新计算
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
        }
      },
      false
    );

    if (doc.readyState === "complete") {
      doc.body.style.fontSize = "16px";
    } else {
      doc.addEventListener(
        "DOMContentLoaded",
        function(e) {
          doc.body.style.fontSize = "16px";
        },
        false
      );
    }
  })(750, 750);
!(function(e, t) {
  function n() {
    var n = l.getBoundingClientRect().width;
    (t = t || 540), n > t && (n = t);
    var i = (100 * n) / e;
    r.innerHTML = "html{font-size:" + i + "px;}";
  }
  var i,
    d = document,
    o = window,
    l = d.documentElement,
    r = document.createElement("style");
  if (l.firstElementChild) l.firstElementChild.appendChild(r);
  else {
    var a = d.createElement("div");
    a.appendChild(r), d.write(a.innerHTML), (a = null);
  }
  n(),
    o.addEventListener(
      "resize",
      function() {
        clearTimeout(i), (i = setTimeout(n, 300));
      },
      !1
    ),
    o.addEventListener(
      "pageshow",
      function(e) {
        e.persisted && (clearTimeout(i), (i = setTimeout(n, 300)));
      },
      !1
    ),
    "complete" === d.readyState
      ? (d.body.style.fontSize = "16px")
      : d.addEventListener(
          "DOMContentLoaded",
          function(e) {
            d.body.style.fontSize = "16px";
          },
          !1
        );
})(750, 750);
</script>


<style lang="less">
@import "/assets/css/app.css";
</style>
